<!-- Preloader -->
<section id="preloader">
  <div class="loader" id="loader">
    <div class="loader-img"></div>
  </div>
</section>
<!-- End Preloader -->

<!-- Site Wraper -->
<div class="wrapper">

  <!-- HEADER -->
  <header class="header" style="backgrount-color:#3399cc">
    <div class="container">

      <!-- logo -->
      <div class="logo">
        <a href="home-personal.html">
          <img class="l-black" src="http://owl.oss-cn-beijing.aliyuncs.com/image/logo.png" />
          <img class="l-white" src="http://owl.oss-cn-beijing.aliyuncs.com/image/logo.png" />
          <!-- <img class="l-color" src="http://owl.oss-cn-beijing.aliyuncs.com/image/logo-color.png" />-->
        </a>
      </div>
      <!--End logo-->

      <!-- Rightside Menu ( Bart icon) -->
      <div class="side-menu-btn" style="backgrount-color:#3399cc; left:30px;">
      <ul>

      </ul>
    </div>
    <!-- End Rightside Menu -->

    <!-- Navigation Menu -->
    <nav class='navigation'>
      <ul>
        <li>
          <a href="home.html">BookMarks</a>
        </li>
      </ul>
    </nav>
    <!--End Navigation Menu -->
</div>
</header>
<!-- END HEADER -->

<!-- CONTENT --------------------------------------------------------------------------------->

<!-- Intro Section -->
<section class="full-screen-intro">

  <!-- Bg Image -->
  <div class="media-wapper bg-img22 cont-h-100per"></div>
  <!-- End Bg Image -->

  <!-- Content -->
  <div class="full-cap-wraper overlay-dark80 light-color">
    <div class="content-caption light-color parallax parallax-opacity">
      <div class="container" style="font-family: 微软雅黑;">
        <h2 class="">改变从这里开始</h2>
        <div class="row">
          <h5 class="col-md-6 col-md-offset-3">聚合知识的路程，价值从收藏出发</h5>
        </div>
        <br>
      </div>
    </div>
  </div>
  <!-- End Content -->
</section>
<div class="clearfix"></div>
<!-- End Intro Section -->

<!--part2 Section-->

<section id="part2" class="wow fadeIn ptb ptb-sm-80">
  <div class="wow fadeInUpBig container" >
    <div class="row" >
      <div class="col-md-1 mb-30"></div>
      <!-- Skills -->
      <div class="col-md-4 mb-30">
        <img class="body_part_2" src="http://owl.oss-cn-beijing.aliyuncs.com/image/body_2_1.png"/>
      </div>
      <div class="col-md-2 mb-30"></div>
      <div class="col-md-4 col-sm-6 mb-45">
        <h3>快速收集</h3>
        <p>喜欢哪个网站,快捷收集,分类归档</p>
        <h3>快速搜索</h3>
        <p>帮助您急速定位需要的书签</p>
        <h3>快速访问</h3>
        <p>可视化操作界面实现快速访问、完美而优雅的视觉体验和操作环境</p>
      </div>
      <!-- End Skills -->
    </div>
  </div>
</section>
<!-- End part2 Section-->

<!-- part3 Section -->
<section id="part3" class="gray-bg ptb ptb-sm-80">
  <div class="wow fadeInLeft container text-left">
    <div class="row">
      <div class="col-md-2 mb-30"></div>
      <div class="col-md-4 col-sm-6 mb-45">
        <h3>导入数据</h3>
        <p>一键轻松导入</p>
        <h3>云端备份</h3>
        <p>保障您的数据安全</p>
        <h3>自定义频道</h3>
        <p>根据您的需求建立分类更好的管理书签</p>
      </div>
      <div class="col-md-4 mb-30">
        <img class="body_part_3" src="http://owl.oss-cn-beijing.aliyuncs.com/image/computer.png"/>
      </div>
    </div>
  </div>
</section>
<!-- End part3 Section -->
<hr />
<!-- part4 Section -->
<section id="contact-info" class="ptb ptb-sm-80" style="padding-top: 40px;padding-bottom: 40px;">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <span style="float:left;"><img class="chrome" src="http://owl.oss-cn-beijing.aliyuncs.com/image/chrome.png"/></span>
      </div>
    </div>
  </div>
</section>
<hr/>
<!-- End part4 Section -->
<!-- Client Logos Section -->
<section id="client-logos" class="wow fadeIn ptb ptb-sm-80" style="padding-top: 60px;padding-bottom: 60px;">
  <div class="container">
    <div class="owl-carousel client-carousel nf-carousel-theme ">
      <div class="item">
        <div class="client-logo">
          <img src="http://owl.oss-cn-beijing.aliyuncs.com/image/logos/01.png" alt="" />
        </div>
      </div>
      <div class="item">
        <div class="client-logo">
          <img src="http://owl.oss-cn-beijing.aliyuncs.com/image/logos/02.png" alt="" />
        </div>
      </div>
      <div class="item">
        <div class="client-logo">
          <img src="http://owl.oss-cn-beijing.aliyuncs.com/image/logos/03.png" alt="" />
        </div>
      </div>
      <div class="item">
        <div class="client-logo">
          <img src="http://owl.oss-cn-beijing.aliyuncs.com/image/logos/04.png" alt="" />
        </div>
      </div>
      <div class="item">
        <div class="client-logo">
          <img src="http://owl.oss-cn-beijing.aliyuncs.com/image/logos/05.png" alt="" />
        </div>
      </div>
      <div class="item">
        <div class="client-logo">
          <img src="http://owl.oss-cn-beijing.aliyuncs.com/image/logos/06.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</section>
<!-- End Client Logos Section -->
<hr />
<section id="contact-info" class="ptb ptb-sm-80" style="padding-top: 40px;padding-bottom: 40px;">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="contact-box-left">
          <div class="contact-icon-left"><i class="ion ion-ios-location"></i></div>
          <h6>Address</h6>
        </div>
      </div>

      <div class="col-md-4">
        <div class="contact-box-left">
          <div class="contact-icon-left"><img class="qqlogo" src="http://owl.oss-cn-beijing.aliyuncs.com/image/qq.png"/></div>

          <p>

            <span style="font-family: 微软雅黑;"> QQ群:330753907</span><br />
          </p>
        </div>
      </div>

      <div class="col-md-4">
        <div class="contact-box-left">
          <div class="contact-icon-left"><img class="emaillogo" src="http://owl.oss-cn-beijing.aliyuncs.com/image/email.png"/></div>
          <p>
            <a href="mailto:65384403@qq.com" style="font-family: 微软雅黑;">Email:65384403@qq.com</a>
          </p>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- END CONTENT ---------------------------------------------------------------------------->

<!-- FOOTER -->
<footer class="footer pt-80" style="background-color:black;">

  <!-- Copyright Bar -->
  <section class="copyright pb-60">
    <div class="container">
      <p class="footerColor">
        &copy; 2015 <a><b class="footerColor">OWL42</b></a>. 备案号:翼ICP备13014548号
      </p>
    </div>
  </section>
  <!-- End Copyright Bar -->

</footer>
<!-- END FOOTER -->

<!--  scrll top -->
<div id="floatPanel">
  <div class="ctrolPanel" style="right:20px;">
    <a class="arrow fa fa-2x fa-angle-double-up" href="#"></a>
    <a class="contact fa fa-2x fa-comments" href="http://404.html" target="_blank"></a>
    <a class="qrcode fa fa-3x fa-mobile-phone" href="#"><span>二维码</span></a>
    <a class="arrow fa fa-2x fa-angle-double-down" href="#"></a>
  </div>
  <div class="popPanel" style="right:66px;">
    <div class="popPanel-inner">
      <div class="qrcodePanel"><img src="helloweba.jpg" /><p>扫描二维码关注微信号</p></div>
      <div class="arrowPanel">
        <div class="arrow01"></div>
        <div class="arrow02"></div>
      </div>
    </div>
  </div>
</div>
<!-- end scrll top -->

</div>
<!-- Site Wraper End -->


<!-- JS -->

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>

<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/jquery.easing.js" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/jqueryui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/jquery.flexslider.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/background-check.min.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/jquery.fitvids.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/jquery.viewportchecker.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/jquery.stellar.min.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/wow.min.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/jquery.colorbox-min.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/owl.carousel.min.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/isotope.pkgd.min.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/jPushMenu.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/jquery.fs.tipper.min.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/mediaelement-and-player.min.js"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/plugin/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/theme.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/navigation.js" type="text/javascript"></script>
<script src="http://owl.oss-cn-beijing.aliyuncs.com/js/contact-form.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function(){
        $("#floatPanel a.arrow").eq(0).click(function(){
            $("html,body").animate({scrollTop :0}, 1000);
            return false;
        });
        $("#floatPanel a.arrow").eq(1).click(function(){
            $("html,body").animate({scrollTop : $(document).height()}, 1000);
            return false;
        });

        var panel = $(".popPanel");
        var w = panel.outerWidth();

        $(".qrcode").hover(function(){
            panel.css("width","0px").show();
            panel.animate({"width" : w + "px"},300);
        },function(){
            panel.animate({"width" : "0px"},300);
        });


    });
</script>